<template>
  <div id="blog-detail">
    <Header></Header>
    <div class="detail-content">
      
      <div>
        <h2 class="blog-header">{{blog.title}}</h2>
        <router-link :to="'/blog/'+blog.id+'/edit'">
          <el-link  type="primary" icon="el-icon-edit" v-if="ownBlog">编辑</el-link>
        </router-link>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <router-link :to="'/blog/'+blog.id+'/edit'">
          <el-link  type="danger" v-if="ownBlog">[删除]</el-link>
        </router-link>
        <el-divider></el-divider>
        <div class="blog-content markdown-body"  v-html="blog.content"></div>
      </div>

    </div>
    
  </div>
</template>

<script>
import Header from "@/components/Header";
import 'github-markdown-css/github-markdown.css' // 然后添加样式markdown-body
export default {
  name: "BlogDetail",
  components: {Header},
  data(){
    return{
      ownBlog:false,
      blog:{
        id:'',
        title:'',
        description:'',
        content:'',
        created:'',
        userId:'',
      }
    }
  },
  created() {

    const _this=this;
    this.$axios.get('/blog/'+_this.$route.params.blogId).then(resp=>{
      console.log(resp);
      const blog=resp.data.data;
      this.blog.id=blog.id;
      this.blog.title=blog.title;
      this.blog.description=blog.description;
      this.blog.created=blog.created;
      this.blog.userId=blog.userId;
      //创建时是markdown格式
      //进行渲染回markdown格式，
      let markdownIT=require('markdown-it');
      let mk= new markdownIT();
      let result=mk.render(blog.content);
      
      this.blog.content=result;
      this.ownBlog=(blog.userId===_this.$store.getters.getUserInfo.id)
    })
  }
}
</script>

<style scoped>
.detail-content{
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  width: 100%;
  min-height: 200px;
  padding: 15px 20px;
}
.blog-header{
  text-align: center;
}

</style>